<script setup>
import { ref, onBeforeMount } from 'vue'
import axios from 'axios';
import {Key, Config, columns, configColumns} from '../util/Common'

const plugins = ref(null)
const targetPlugin = ref(null)
const keyManage = ref(new Key())
const configManage = ref(new Config())


onBeforeMount(() => {
  freshList()
  setInterval(() => {
    freshList()
  }, 1000 * 60);
});

function freshList () {
  axios.get('/plugin/list/plugin').then(res => {
    plugins.value = res.data.data
    if (targetPlugin != null) {
    }
  }).catch(err => err)
}

const handleKeyListOk = e => {
  keyManage.value.show = false;
}
const handleConfigListOk = e => {
  configManage.value.show = false;
}

</script>

<template>
  <div id="home">
    <a-table :dataSource="plugins" :columns="columns">
      <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'operation'">
        <a-flex gap="middle">
          <a @click="keyManage.openKeyPanel(record)">key</a>
          <a @click="configManage.openConfigPanel(record)">config</a>
        </a-flex>
      </template>
    </template>
    </a-table>
    <!-- <a-modal v-model:open="keyManage.show" title="key" @ok="handleKeyListOk">
      <a-flex>
        <a-input v-model:value="keyManage.keyToNew" placeholder="key" />
        <a-button @click="keyManage.newKey()">New</a-button>
      </a-flex>
      <a-list item-layout="horizontal" :data-source="keyManage.list" style="max-height: 400px;overflow: auto;">
        <template #renderItem="{ item }">
          <a-list-item>
            <span>{{ item }}</span>
            <template #actions>
              <a key="list-loadmore-del" @click="keyManage.delKey(item)">del</a>
            </template>
          </a-list-item>
        </template>
      </a-list>
    </a-modal> -->
    <a-modal v-model:open="keyManage.show" title="config" @ok="handleKeyListOk">
      <a-flex>
        <a-input v-model:value="keyManage.keyToNew.key" placeholder="key" />
        <a-input v-model:value="keyManage.keyToNew.value" placeholder="value" />
        <a-button @click="keyManage.newKey()">New</a-button>
      </a-flex>
      <a-table :dataSource="keyManage.list" :columns="configColumns"  class="configTable">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'key'">
            <div class="Key"><a :href="`/rss/${keyManage.targetRoute}/${record.key}.xml`" target="_blank">{{ record.key }}</a></div>
          </template>
          <template v-if="column.key === 'value'">
            <div class="Val">{{ record.value }}</div>
          </template>
          <template v-if="column.key === 'operation'">
            <a-flex gap="middle">
              <a @click="keyManage.editKey(record.key)">edit</a>
              <a @click="keyManage.delKey(record.key)">del</a>
            </a-flex>
          </template>
        </template>
      </a-table>
    </a-modal>
    <a-modal v-model:open="configManage.show" title="config" @ok="handleConfigListOk">
      <a-flex>
        <a-input v-model:value="configManage.configToNew.key" placeholder="key" />
        <a-input v-model:value="configManage.configToNew.value" placeholder="value" />
        <a-button @click="configManage.newConfig()">New</a-button>
      </a-flex>
      <a-table :dataSource="configManage.list" :columns="configColumns"  class="configTable">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'key'">
            <div class="Key">{{ record.key }}</div>
          </template>
          <template v-if="column.key === 'value'">
            <div class="Val">{{ record.value }}</div>
          </template>
          <template v-if="column.key === 'operation'">
            <a-flex gap="middle">
              <a @click="configManage.editConfig(record.key)">edit</a>
              <a @click="configManage.delConfig(record.key)">del</a>
            </a-flex>
          </template>
        </template>
      </a-table>
    </a-modal>
    <!-- <a-modal v-model:open="showLoginPanel.isShow" title="填写管理员密码" @ok="login">
      <a-input type="password" v-model:value="showLoginPanel.label" placeholder="密码" :maxlength="50"/>
    </a-modal> -->
  </div>
</template>

<style scoped>
#home{
  width: 100%;
  height: 100%;
}
.configTable {
  position: relative;
  overflow: hidden;
}
.Key {
  width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.Val {
  width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
